<template><div><h1 id="三-动画" tabindex="-1"><a class="header-anchor" href="#三-动画" aria-hidden="true">#</a> 三.动画</h1>
<p>动画就是指定一组或多组成套的动作，按照指定时间，指定的方式自动完成。h5 中动画的运用效率要高于使用 js来体现动画效果，因为动画是渲染式的。</p>
<h2 id="_1-关键帧" tabindex="-1"><a class="header-anchor" href="#_1-关键帧" aria-hidden="true">#</a> 1.关键帧</h2>
<p>@keyframes 是 css 中的@规则，通过在动画序列中定义关键帧的样式，来控制 CSS 动画序列中的步骤。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token atrule"><span class="token rule">@keyframes</span> move</span> <span class="token punctuation">{</span>
    <span class="token comment">/*样式列表*/</span>
    <span class="token selector">0%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">100%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>600px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-动画名称" tabindex="-1"><a class="header-anchor" href="#_2-动画名称" aria-hidden="true">#</a> 2.动画名称</h2>
<p>animation-name 属性就是指定动画要使用哪一个关键帧。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token comment">/*这个元素使用关键帧*/</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> move<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> move</span> <span class="token punctuation">{</span>
    <span class="token selector">0%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">100%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>600px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-动画持续时间" tabindex="-1"><a class="header-anchor" href="#_3-动画持续时间" aria-hidden="true">#</a> 3.动画持续时间</h2>
<p>animation-duration 属性代表一个动画周期的时长，单位为秒(s)或者毫秒(ms)，默认值 0 秒。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token comment">/*这个元素使用关键帧*/</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> move<span class="token punctuation">;</span>
    <span class="token comment">/* 动画时长 */</span>
    <span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> move</span> <span class="token punctuation">{</span>
    <span class="token selector">0%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">100%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>600px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-动画的运动方式" tabindex="-1"><a class="header-anchor" href="#_4-动画的运动方式" aria-hidden="true">#</a> 4.动画的运动方式</h2>
<p>animation-timing-function 属性跟 transition-timing-function 属性就是过渡的运动方式类似。同样也具有封装好的方式和贝塞尔曲线的方式。</p>
<ul>
<li>
<p>ease;默认</p>
</li>
<li>
<p>ease-in;</p>
</li>
<li>
<p>ease-out;</p>
</li>
<li>
<p>ease-in-out;</p>
</li>
<li>
<p>linear;</p>
</li>
<li>
<p>steps(数值, 定位) 定位：start/end 默认 end 指逐步运动</p>
<p>使用 steps()函数完成，逐帧完成动画效果
loding 图标分为四段和八段完成帧动画</p>
</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 20px auto<span class="token punctuation">;</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> zhuan<span class="token punctuation">;</span>
    <span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> zhuan</span> <span class="token punctuation">{</span>
    <span class="token selector">0%</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span>
    <span class="token selector">100%</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token selector">.a1</span> <span class="token punctuation">{</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token comment">/*平滑的旋转*/</span>
<span class="token selector">.b1</span> <span class="token punctuation">{</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token comment">/*平滑的旋转*/</span>
<span class="token selector">.a2</span> <span class="token punctuation">{</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> <span class="token function">steps</span><span class="token punctuation">(</span>4<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token comment">/*断续旋转分4段*/</span>
<span class="token selector">.b2</span> <span class="token punctuation">{</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> <span class="token function">steps</span><span class="token punctuation">(</span>8<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token comment">/*断续旋转分8段*/</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_5-动画的延迟时间" tabindex="-1"><a class="header-anchor" href="#_5-动画的延迟时间" aria-hidden="true">#</a> 5.动画的延迟时间</h2>
<p>animation-delay 属性动画的延迟时间和之前过渡的延迟时间一样使用</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token comment">/*这个元素使用关键帧*/</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> move<span class="token punctuation">;</span>
    <span class="token comment">/* 动画时长 */</span>
    <span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
    <span class="token comment">/* 运动方式 */</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
    <span class="token comment">/* 动画延迟时间 */</span>
    <span class="token property">animation-delay</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_6-结束状态" tabindex="-1"><a class="header-anchor" href="#_6-结束状态" aria-hidden="true">#</a> 6.结束状态</h2>
<p>在动画运行到某个位置的时候，动画停止，元素默认会迅速回到起始位置</p>
<ul>
<li>animation-fill-mode :设置动画结束时盒子的状态</li>
<li>属性值： forwards 保持动画结束后的状态</li>
<li>属性值： backwards 动画结束后回到最初的状态</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.ball</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> move<span class="token punctuation">;</span>
    <span class="token property">animation-duration</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
    <span class="token comment">/*没设置结束状态，会回到最初的状态*/</span>
    <span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> backwards<span class="token punctuation">;</span> <span class="token comment">/*默认*/</span>
    <span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> forwards<span class="token punctuation">;</span> <span class="token comment">/*保持结束时状态*/</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_7-动画化执行顺序" tabindex="-1"><a class="header-anchor" href="#_7-动画化执行顺序" aria-hidden="true">#</a> 7.动画化执行顺序</h2>
<p>animation-direction 属性是动画的执行顺序</p>
<ul>
<li>属性值：normal 正向，默认值</li>
<li>属性值：reverse 反向</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.hsl</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token property">animation-name</span><span class="token punctuation">:</span> move<span class="token punctuation">;</span>
    <span class="token property">animation-duration</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
    <span class="token comment">/* 动画执行顺序 -反向*/</span>
    <span class="token property">animation-direction</span><span class="token punctuation">:</span> reverse<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_8-动画循环次数" tabindex="-1"><a class="header-anchor" href="#_8-动画循环次数" aria-hidden="true">#</a> 8.动画循环次数</h2>
<ul>
<li>来定义动画的播放次数。</li>
<li>其值通常为整数，但也可以使用带有小数的数字，其默认值为 1，这意味着动画将从开始到结束只播放一次。</li>
<li>如果取值为 infinite ，动画将会无限次的播放。</li>
</ul>
<h2 id="_9-简写方式" tabindex="-1"><a class="header-anchor" href="#_9-简写方式" aria-hidden="true">#</a> 9.简写方式</h2>
<ul>
<li>animation: 动画执行时间 延迟时间 执行关键帧名称 运动方式 运动次数 结束状态;</li>
<li>最简方式 animation: 动画执行时间 执行关键帧名称;</li>
<li>执行时间和延迟时间顺序不可调整</li>
<li>animation: 2s 3s move linear 1 forwards reverse;</li>
</ul>
<h2 id="_10-动画停止" tabindex="-1"><a class="header-anchor" href="#_10-动画停止" aria-hidden="true">#</a> 10.动画停止</h2>
<ul>
<li>animation-play-state 属性规定动画是否正在运行或暂停。</li>
<li>属性值：running 运动的，默认值</li>
<li>属性值：paused 暂停的</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">.box:hover .hsl</span> <span class="token punctuation">{</span>
    <span class="token property">animation-play-state</span><span class="token punctuation">:</span> running<span class="token punctuation">;</span>
    <span class="token property">animation-play-state</span><span class="token punctuation">:</span> paused<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_11-开源-css-动画库" tabindex="-1"><a class="header-anchor" href="#_11-开源-css-动画库" aria-hidden="true">#</a> 11.开源 CSS 动画库</h2>
<h3 id="_1-animate-css-下载与引用" tabindex="-1"><a class="header-anchor" href="#_1-animate-css-下载与引用" aria-hidden="true">#</a> （1）animate.css 下载与引用</h3>
<p>下载:http://www.animate.net.cn/
引用</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code>&lt;head>
	&lt;link rel=<span class="token string">"stylesheet"</span> href=<span class="token string">"animate.min.css"</span> />
&lt;/head>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-使用方法" tabindex="-1"><a class="header-anchor" href="#_2-使用方法" aria-hidden="true">#</a> （2）使用方法</h3>
<ul>
<li>元素加入需要的类名</li>
<li>当前元素使用 animate 属性，属性值为类名和运行时间</li>
<li>需要在元素先加上 animate__animated 类，之后在加入其他类</li>
</ul>
<div class="language-html line-numbers-mode" data-ext="html"><pre v-pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./animate.min.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span> 1s animate__rubberBand<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>animate__rubberBand<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>元素<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>animate__animated animate__shakeX<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>自动调用<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


